<template>
  <div class="page">
    <!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">用户管理</span>　|　<span>添加新用户</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
    <el-form :model="form" block id="addform" style="text-align: left;">
      <el-form-item label="用户名称:" autofocus :label-width="formLabelWidth">
        <el-input v-model="form.user_name" autocomplete="new-password" class="inpu" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <!-- <el-form-item label="用户类型:" :label-width="formLabelWidth" class="formline">
				<el-select v-model="form.user_type" placeholder="选择默认首页" class="inpu">
					<el-option v-for="item in userTypes" :value="item.value" :key="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-form-item> -->
      <el-form-item label="手机号:" :label-width="formLabelWidth" class="formline">
        <el-input v-model="form.mobile" autocomplete="new-password" class="inpu" type="telephone" validate-event
          spellcheck="false" placeholder="请输入手机号"></el-input><br>
      </el-form-item>
      <!-- <el-form-item label="邮箱:" :label-width="formLabelWidth" class="formline">
				<el-input v-model="form.email"  autocomplete="new-password" class="inpu" id="email" style="background-color:none;" name="email" type="email"  placeholder="请输入邮箱"></el-input><br>
			</el-form-item> -->
      <el-form-item label="密码:" :label-width="formLabelWidth" class="formline">
        <el-input v-model="form.user_pass" autocomplete="new-password" class="inpu" id="default" type="password"
          validate-event spellcheck="false" placeholder="请输入登录密码"></el-input>
        <i class="el-icon-view flr" @click="showDefaultPass"></i><br>
        <span style="font-size:0.3rem;">默认为123456，建议修改</span>
      </el-form-item>
      <el-form-item label="平台名称:" :label-width="formLabelWidth" class="formline">
        <el-input v-model="form.site_name" auto-complete="off" class="inpu" placeholder="请输入平台名称" validate-event
          spellcheck="false" type="text"></el-input><br>
      </el-form-item>
      <!-- <el-form-item label="平台首页:" :label-width="formLabelWidth" class="formline">
				<el-select v-model="form.index_page" placeholder="选择默认首页" class="inpu">
					<el-option v-for="item in pages" :value="item.value" :key="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-form-item> -->
      <!-- 0 -->

      <!-- <el-form-item label="平台命名:" :label-width="formLabelWidth" class="formline">
        <el-switch v-model="form.site_auth" :width="stateWidth" class="demo"
          style="display:inline-block;vertical-align:top;" active-color="#13ce66" inactive-color="#ccc" active-text="开"
          inactive-text="关" :active-value="one" :inactive-value="zero">
        </el-switch>
      </el-form-item> -->
      <el-form-item label="平台命名:" :label-width="formLabelWidth" class="formline">
        <el-radio-group v-model="form.site_auth">
          <el-radio :label="1" style="font-size:0.3rem;">开启</el-radio>
          <el-radio :label="0" style="font-size:0.3rem;">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="监控模式:" :label-width="formLabelWidth" class="formline">
        <el-select v-model="form.monitor_mode" placeholder="选择监控模式" class="inpu">
          <el-option v-for="item in viewModes" :value="item.value" :key="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="form.monitor_mode==0" label="自定义监控菜单:" class="formline" style="margin-top:-0.1rem;"
        :label-width="formLabelWidth">
        <div class="sensorHead" ref="sensorHead">
          <!-- <span class="topTitle"  style="text-align: left;">默认名称</span> -->
          <span class="topTitle" style="margin-left:0.7rem;">名称</span>
          <span class="topTitle" style="width:1.2rem;margin-left:0.4rem;">排序</span>
          <span class="topTitle" style="margin-left:0.35rem;">是否显示</span>
          <span class="topTitle" style="margin-left:0.1rem;">默认监控</span>
        </div>
        <div v-for="(item,i) in form.monitor_menu" :key="item.key" class="oneDomain">
          <el-input class="inpu_2" v-model="item.title" :placeholder="item.title"></el-input>
          <el-input class="inpu_2" style="width:1.4rem;margin-left:0.5rem;margin-right:0.4rem" v-model="item.number"
            placeholder="排序"></el-input>
          <span class="oneBox" :class="item.isShow==1?'isChoose':'onChoose'"
            @click="chooseOneShow(i)"><span>√</span></span>

          <span class="oneBox" :class="item.isIndex==1?'isChoose':'onChoose'" style="margin-left:1.6rem;"
            @click="chooseOneIndex(i,item,item.isIndex)"><span>√</span></span>
        </div>
      </el-form-item>
      <el-form-item style="margin-left:0.8rem;" class="formline">
        <el-button type="success" size="small" @click="addUser">保存</el-button>
        <el-button type="primary" size="small" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'addUser',
    data() {
      return {
        one: 1,
        zero: 0,
        two: 2,
        userId: localStorage.getItem("at_userId"),
        // grade: localStorage.getItem("grade"),
        formLabelWidth2: '80px',
        formLabelWidth: '140px',
        stateWidth: 60,
        value: '',
        id: 0,
        parid: 0,
        viewModes: [{
            value: 0,
            label: '标准模式'
          },
          {
            value: 1,
            label: '组态模式'
          },
        ],
        defaultMenu: [{
            title: "实时数据",
            key: "data",
            number: 1,
            isShow: 1,
            isIndex: 1
          },
          {
            title: "组态监控",
            key: "view",
            number: 2,
            isShow: 1,
            isIndex: 0
          },
          {
            title: "数据报表",
            key: "statement",
            number: 3,
            isShow: 1,
            isIndex: 0
          },
          {
            title: "数据分析",
            key: "analysis",
            number: 4,
            isShow: 1,
            isIndex: 0
          },
          {
            title: "历史数据",
            key: "history",
            number: 5,
            isShow: 1,
            isIndex: 0
          },
          {
            title: "报警记录",
            key: "alarm",
            number: 6,
            isShow: 1,
            isIndex: 0
          },
          {
            title: "操作记录",
            key: "log",
            number: 7,
            isShow: 1,
            isIndex: 0
          },
          {
            title: "设备地图",
            key: "map",
            number: 8,
            isShow: 1,
            isIndex: 0
          },
          {
            title: "视频监控",
            key: "video",
            number: 9,
            isShow: 1,
            isIndex: 0
          }
        ],
        // pages:[
        // 	{
        // 	   value:1,
        // 	   label:"设备地图(默认)"
        //     },{
        // 	   value:2,
        // 	   label:"监控中心"
        //     },{
        // 	   value:3,
        // 	   label:"大屏监控"
        //     }
        // ],
        // showProducts:[
        // 	{
        // 		value:1,
        // 		label:'展开'
        // 	},
        // 	{
        // 		value:0,
        // 		label:'折叠'
        // 	}
        // ],
        userTypes: [{
            value: 2,
            label: '普通管理员'
          },
          {
            value: 3,
            label: '普通用户'
          }
        ],
        //自己的平台命名权限
        site_auth: Number(localStorage.getItem("site_auth")),
        form: {
          user_name: '',
          mobile: '',
          user_type: 2,
          //email: '',
          //products_view:1,
          site_name: localStorage.getItem("site_name"),
          site_auth: 0, //子用户的平台命名权限
          user_pass: '123456',
          //index_page:1,
          user_state: 1,
          monitor_mode: 0,
          monitor_menu: []
          // enable_create: false,
          // enable_receive: false,
          //equip_auth: false,
          //parent_id: localStorage.getItem("userId")
        },
        options: []
        // parents: [{
        //     value: localStorage.getItem("userId"),
        //     label: localStorage.getItem("ykuser")
        // }]
      }
    },
    created() {
      this.form.monitor_menu = Array.from(this.defaultMenu);
    },

    methods: {
      showDefaultPass(event) {
        if (document.getElementById("default").type == "password") {
          document.getElementById("default").type = "text";
          event.target.style.color = "deepskyblue";
        } else {
          document.getElementById("default").type = "password";
          event.target.style.color = "#ccc";
        }
      },



      resetForm() {
        for (var key in this.form) {
          this.form[key] = null;
        }
        this.form.user_state = 1;
        this.form.user_type = 2;
        this.form.monitor_mode = 0;
        this.form.user_pass = '123456';
        this.form.monitor_menu = Array.from(this.defaultMenu);
        this.form.site_name = localStorage.getItem("site_name");
      },

      chooseOneIndex(n, item, isIndex) {
        this.form.monitor_menu[n].isIndex = this.form.monitor_menu[n].isIndex == 1 ? 0 : 1;
        if (this.form.monitor_menu[n].isIndex) {
          this.form.monitor_menu[n].isShow = 1;
          for (let i = 0, len = this.form.monitor_menu.length; i < len; i++) {
            if (this.form.monitor_menu[i].key != item.key) {
              this.form.monitor_menu[i].isIndex = 0;
            }
          }
        }
        let without = this.form.monitor_menu.every(function(item, index, arr) {
          return item.isIndex == 0
        })
        if (without) {
          this.form.monitor_menu[0].isIndex = 1;
          this.form.monitor_menu[0].isShow = 1;
        }

      },

      //选中当前一个或取消的函数；
      chooseOneShow(index) {
        this.form.monitor_menu[index].isShow = this.form.monitor_menu[index].isShow == 1 ? 0 : 1;
        if (this.form.monitor_menu[index].isShow == 0 && this.form.monitor_menu[index].isIndex == 1) {
          this.$message({
            message: '默认监控项必须显示，或先取消默认!',
            type: 'info',
            center: true
          })
          this.form.monitor_menu[index].isShow = 1;
          return
        }
        let without = this.form.monitor_menu.every(function(item, index, arr) {
          return item.isShow == 0
        })
        if (without) {
          this.$message({
            message: '请至少保留一个菜单!',
            type: 'info',
            center: true
          })
          this.form.monitor_menu[index].isShow = 1;
        }
      },

      //          getParent() {
      //              var that = this;
      //              this.parents = [{
      //                  value: localStorage.getItem("userId"),
      //                  label: localStorage.getItem("ykuser")
      //              }];
      //              this.$http({
      //                  method: 'post',
      //                  url: 'api/user/child',
      //                  data: {
      //                      "id": localStorage.getItem("userId")

      //                  }
      //              }).then(res => {
      //                  if (res && res.data.result == "success") {
      //                      if (res.data.data.length) {
      //                          for (var i = 0; i < res.data.data.length; i++) {
      //                              var parent = {
      //                                  value: res.data.data[i].id,
      // 						grade: res.data.data[i].grade,
      //                                  label: res.data.data[i].user_name
      //                              }
      //                              this.parents.push(parent)
      //                          }
      //                          this.form.parent_id = this.parents[0].value;
      //                      } else {
      //                          this.parents = [{
      //                              value: localStorage.getItem("userId"),
      //                              label: localStorage.getItem("ykuser")
      //                          }];
      //                      }

      //                  }
      //              }).catch(error => {
      //                  console.log(error);

      //              });
      //          },

      // changeParent(id) {
      // 	for(let i=0,len=this.parents.length;i<len;i++){
      // 		if(id==this.parents[i].value && this.parents[i].grade==2){
      // 			this.pages=[
      // 				{
      // 				   value:2,
      // 				   label:"监控中心"
      // 				},{
      // 				   value:3,
      // 				   label:"大屏监控"
      // 				}
      // 			];
      // 			this.form.index_page=2;
      // 		    break;
      // 		}else{
      // 			this.pages=[
      // 				{
      // 				   value:1,
      // 				   label:"设备地图(默认)"
      // 			    },{
      // 				   value:2,
      // 				   label:"监控中心"
      // 			    },{
      // 				   value:3,
      // 				   label:"大屏监控"
      // 			    }
      // 			];
      // 			this.form.index_page=1;
      // 		}
      // 	}
      // },

      addRequest() {
        this.$http({
          method: 'post',
          url: 'api/user/add',
          data: this.form
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              message: '恭喜,添加用户成功!',
              type: 'success',
              center: true
            });
            this.$router.go(-1);
          }
        }).catch(error => {
          console.log(error);
        });
      },


      addUser() {
        var reTel = /^1[3-9][0-9]{9}$/;
        //var reEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (this.form.user_name) {
          if (!this.form.mobile) {
            this.$message({
              message: '手机号不能为空，请输入!',
              type: 'error',
              center: true
            });
            return false;

          }
          if (this.form.mobile && (!reTel.test(this.form.mobile))) {
            this.$message({
              message: '手机号格式不正确，请重新输入!',
              type: 'error',
              center: true
            });
            return false;

          }
          this.addRequest();

        } else {
          this.$message({
            message: '用户名称不能为空，请输入!',
            type: 'error',
            center: true
          });

        }

      },

      goBack() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>
  @media all and (max-width:1366px) {
    .formline {
      margin-top: -0.3rem !important;
    }
  }

  #addform {
    /* width:18%; */
    text-align: left;
    margin-top: 0.3rem;
  }

  .formline {
    margin-top: -0.2rem;
  }

  .inpu {
    width: 5rem;
  }

  .flr {
    font-size: 0.4rem;
    vertical-align: middle;
    margin-left: 0.1rem;
    color: #ccc;
  }

  .sortIcon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.1rem;
    width: 0.3rem !important;
    height: 0.3rem;
    font-size: 0.25rem;
    line-height: 0.3rem;
    text-align: center;
    color: #999;
    background-color: #ccc;
  }

  @media all and (max-width:2560px) {
    .sensorHead {
      width: 25% !important;
    }

  }

  @media all and (max-width:1920px) {
    .sensorHead {
      width: 35% !important;
    }

  }

  @media all and (max-width:1600px) {
    #addform {
      margin-left: -0.3rem !important;
    }

    .oneDomain {
      margin-top: 0.2rem !important;
    }
  }

  @media all and (max-width:1366px) {
    #addform {
      width: 100% !important;
      margin-left: 0rem !important;
    }

    /* .tip {
	        font-size: 0.4rem!important;
	    } */
  }


  .sensorHead {
    /* margin-left:0.1rem!important; */
    height: 0.8rem;
    line-height: 0.8rem;
    /* border:1px solid red; */
    width: 60%;
    border-bottom: 1px solid #111;
    margin: -0.2rem 0 0.1rem 0;
    padding: 0;
    padding-left: 0.2rem;
  }

  .oneDomain>>>.el-input__inner {
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    height: 0.6rem !important;
    line-height: 0.6rem !important;
    border: none;
    margin-top: -0.1rem;
    border: 1px solid #ccc !important;

  }

  .oneDomain>>>.el-select__caret {
    font-size: 12px;
  }

  .oneDomain>>>.el-input__icon {
    width: 14px;
  }

  .inpu {
    width: 5rem;
    vertical-align: middle;
    /* transform: translateY(0.1rem)!important; */
  }

  .inpu_2 {
    width: 2.2rem;
    margin-right: 0.1rem;
    height: 0.6rem !important;
    line-height: 0.6rem !important;
    text-align: center;
    vertical-align: middle;
    border: none;
  }

  .topTitle {
    display: inline-block;
    width: 2rem;
    height: 0.6rem !important;
    line-height: 0.6rem !important;
    /* text-align: center; */
    vertical-align: middle;

  }

  .oneDomain {
    margin-left: 0.4rem;
    height: 0.7rem;
    line-height: 0.7rem;
    width: 60%;
    /* margin-top:-0.2rem; */
    white-space: nowrap;
  }

  .oneBox,
  .typeBox {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem !important;
    line-height: 0.5rem;
    text-align: center;
    transform: translateY(2px);
    margin-left: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    overflow:hidden;

  }

  .typeBox {
    margin: 0;
  }

  .isChoose {
    border: 1px solid #409eff;
    color: #fff;
    background-color: #409eff;
  }

  .onChoose {
    border: 1px solid #ccc;
    color: #fff;
    background-color: #fff;
  }

  .inpu /deep/ .el-input__inner {
    padding-left: 4px;
    padding-right: 4px;
  }

  .inpu /deep/ .el-textarea__inner {
    padding-left: 4px;
    padding-right: 4px;
  }
</style>
